/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
//  1.1 准备查询参数对象
const query = {
  status: '', //文章状态: 1-待审核, 2-审核通过， 不传为全部
  channel_id: '',
  page: 1,
  per_page: 2
}
// 1.2 获取文章列表数据
async function getArticleList() {
  const result = await axios({
    url: '/v1_0/mp/articles',
    params: query
  })
  console.log(result);
  //  1.3 展示到指定的标签结构中

  const htmlStr = result.data.results.map(item => {
    return `
    <tr>
        <td>
          <img src=${item.cover.images ? item.cover.images :
        "https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500"}  alt="">
        </td>
        <td>${item.title}</td>
        <td>
        ${item.status === 1 ? '<span class="badge text-bg-primary">待审核</span>' : '<span class="badge text-bg-success">审核通过</span>'
      }
        </td>
        <td>
          <span>${item.pubdate}</span>
        </td>
        <td>
          <span>${item.read_count}</span>
        </td>
        <td>
          <span>${item.comment_count}</span>
        </td>
        <td>
          <span>${item.like_count}</span>
        </td>
        <td data-id="${item.id}">
          <i class="bi bi-pencil-square edit"></i>
          <i class="bi bi-trash3 del"></i>
        </td>
    </tr>
    `
  }).join('')
  document.querySelector('.art-list').innerHTML = htmlStr

}
getArticleList()
/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
// 2.1 设置频道列表数据
axios({
  url: '/v1_0/channels'
}).then(result => {
  // console.log(result);
  const htmlStr = '<option selected="">请选择文章频道</option>' +
    result.data.channels.map(item => {
      return `
    <option value="${item.id}">${item.name}</option>
    `
    }).join('')
  document.querySelector('.form-select').innerHTML = htmlStr
})
//  2.2 监听筛选条件改变，保存查询信息到查询参数对象
document.querySelector('.form-select').addEventListener('change', e => {
  // console.log(e.target.value);
  query.channel_id = e.target.value

})
document.querySelectorAll('.form-check-input').forEach(item => {
  item.addEventListener('change', e => {
    console.log(e.target.value);
    // 修改请求参数
    query.status = e.target.value
  })
})
//  2.3 点击筛选时，传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', e => {
  // 2.4 获取匹配数据，覆盖到页面展示
  getArticleList()
})
/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
axios({
  url: '/v1_0/mp/articles',
  params: query
}).then(result => {
  console.log(result);
  // 共多少条数据
  document.querySelector('.total-count').innerHTML = `共${result.data.total_count}条`

  // 点击下一页
  document.querySelector('.next').addEventListener('click', e => {
    if (query.page < Math.ceil(result.data.total_count / result.data.per_page)) {
      query.page += 1
      // 当前页码
      document.querySelector('.page-now').innerHTML = `第${query.page}页`
      getArticleList()
    }
  })
  // 点击上一页
  document.querySelector('.last').addEventListener('click', e => {
    if (query.page > 1) {
      query.page -= 1
      // 当前页码
      document.querySelector('.page-now').innerHTML = `第${query.page}页`
      getArticleList()
    }
  })
})

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
// 4.2 点击删除时，获取文章 id
document.querySelector('.table').addEventListener('click', async e => {
  if (e.target.classList.contains('del')) {
    // console.log(e.target.parentNode.dataset.id);
    //  4.3 调用删除接口，传递文章 id 到服务器
    const result = await axios({
      url: `/v1_0/mp/articles/${e.target.parentNode.dataset.id}`,
      method: 'DELETE'
    })
    // console.log(result);
    // 4.5 删除最后一页的最后一条，需要自动向前翻页
    const children = document.querySelector('.art-list').children
    // console.log(children);
    if (children.length === 1 && query.page != 1) {
      query.page--
      document.querySelector('.page-now').innerHTML = `第${query.page}页`
    }
    //  4.4 重新获取文章列表，并覆盖展示
    getArticleList()

  }
})

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.table').addEventListener('click', async e => {
  if (e.target.classList.contains('edit')) {
    // 将id传过来
    const artId = e.target.parentNode.dataset.id

    // 跳转页面，并且携带id参数过去
    location.href = `../publish/index.html?id=${artId}`
  }
})
